<template>
  <div class="good-dtdet">
    <loading :state="loading"></loading>
    <banner1 :banner="data.slider"></banner1>
    <div class="mid">
      <div class="price">
        <span class="symbol">￥</span>
        {{data.price}}
      </div>
      <div class="postage">
        <!--<div>满29.8包邮</div>-->
        <del v-if="data.line">原价{{data.line}}</del>
        <div>月销：{{data.sales}}笔</div>
        <!--<div>山东东营</div>-->
      </div>
      <h5 class="title">{{data.name}}</h5>
    </div>
    <div class="keep">
      <div v-for="(attri, key1) in data.attr" :key="key1">
        {{attri.name}}:{{attri.value}}
      </div>
    </div>
    <!--<div class="comment">-->
    <!--<div class="c-num">-->
    <!--<div class="num">产品评价（{{num}}）</div>-->
    <!--<div class="all" @click="toCommit(goodId, num)">-->
    <!--查看全部-->
    <!--<svg class="right" aria-hidden="true">-->
    <!--<use xlink:href="#icon-qb_gd"></use>-->
    <!--</svg>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="c-body">-->
    <!--<div class="user">-->
    <!--<img :src="comment.head_img">-->
    <!--<div>{{comment.name}}</div>-->
    <!--</div>-->
    <!--<div>{{comment.content}}</div>-->
    <!--</div>-->
    <!--</div>-->
    <div v-html="data.detail" class="detail"></div>
    <!--<img src="http://bainm.oss-cn-beijing.aliyuncs.com/banner/1_5ba472bc9cfbe.png" class="detail">-->
    <div class="bot" v-if="convert">
      <svg class="cart" aria-hidden="true" @click="toCart">
        <use xlink:href="#icon-sy_gwc"></use>
      </svg>
      <div class="buy" @click=buy(data)>立即购买</div>
      <div class="add" @click="add(data)">加入购物车</div>
    </div>
    <div class="bot" v-else>
      <div class="bot-convert" @click="add(data)">
        确认兑换
      </div>
    </div>
    <choose-attr></choose-attr>
  </div>
</template>

<script type="text/ecmascript-6">
  import Banner1 from '../../components/sale/banner1.vue';
  import ChooseAttr from '../../components/sale/chooseAttr.vue';

  export default {
    components: {
      ChooseAttr,
      Banner1
    },
    name: 'goodDetail',

    data() {
      return {
        data: {},
        num: 0,
        goodId: '',
        comment: {},
        loading: true,
        region: '',
        rArea: {},
        convert: true
      };
    },
    props: {},
    created() {
    },
    mounted() {
      window.scrollTo(0, 0);
      this.goodId = this.$route.query.id;
      this.region = this.$route.query.region;
      // 兑换券
      if (this.region === '3488') {
        this.convert = false;
      }
      this.$Sale.getGood({id: this.$route.query.id, region: this.region}).then(res => {
        this.loading = false;
        this.data = res.data;
        this.rArea = res.data.region;
      }, () => {
      });
      this.$Sale.first({goodId: this.$route.query.id}).then(res => {
        this.loading = false;
        this.num = res.data.count;
        this.comment = res.data.data;
      }, () => {
      });
      // 监听物理返回
      if (window.history && window.history.pushState) {
        // 支持History API
        history.pushState(null, null, `/good-detail?id=${this.goodId}`);
        window.addEventListener('popstate', this.fun, false); // false阻止默认事件
      }
    },
    methods: {
      fun() {
        // 监听物理返回
        console.log('监听到了');
        this.$router.replace(
          {
            name: 'elm',
            query: {
              tab: this.$route.query.tab,
              active: this.$route.query.active
            }
          });
        this.$router.go(-1);
      },
      toCommit(goodId, num) {
        this.$router.push(
          {
            name: 'comment',
            query: {
              goodId: goodId,
              num: num
            }
          });
      },
      toCart() {
        this.$router.push('cart');
      },
      add(good) {
        this.$store.commit('goodAttr', good);
        this.$store.commit('showAttr', true);
        this.$store.commit('region', this.region);
      },
      buy(good) {
        this.$store.commit('goodAttr', good);
        this.$store.commit('showAttr', true);
        this.$store.commit('rArea', this.rArea);
        this.$store.commit('region', this.region);
        this.$store.commit('nowBuy', 1);
      }
    },
    destroyed() {
      window.removeEventListener('popstate', this.fun, false); // false阻止默认事件
    },
    computed: {},
    watch: {}
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .good-dtdet
    .mid
      background-color #fff
      padding vw(15)
      margin-bottom vw(10)
      .price
        height vw(30)
        line-height vw(30)
        font-size vw(18)
        color main-color
        .symbol
          font-size vw(12)
          margin-right vw(-5)
      del
        font-size vw(12)
        color #999
      .title
        margin-bottom vw(20)
        margin-top vw(10)
        font-size vw(18)
        color #333
      .postage
        height vw(30)
        line-height vw(30)
        font-size vw(12)
        color #999
        display flex
        justify-content space-between

    .keep
      background-color #fff
      padding 0 vw(15)
      line-height vw(35)
      font-size vw(12)
      color #666
      margin-bottom vw(5)

    .comment
      padding vw(15)
      background-color #fff
      margin-bottom vw(10)
      .c-num
        display flex
        justify-content space-between
        align-items center
        .num
          font-size vw(14)
          color #333
        .all
          font-size vw(12)
          color main-color
          display flex
          align-items center
          .right
            width vw(10)
            height vw(15)
            fill main-color
      .c-body
        padding vw(5)
        .user
          font-size vw(10)
          color #999
          display flex
          align-items center
          margin-bottom vw(15)
          margin-top vw(5)
          img
            width vw(20)
            height vw(20)
            border-radius 50%
            margin-right vw(5)

    .detail
      margin-bottom vw(50)

    .bot
      position fixed
      display flex
      background-color #fff
      width 100vw
      height vw(50)
      align-items center
      justify-content space-between
      padding 0 vw(15)
      box-sizing border-box
      font-size vw(16)
      bottom 0
      .bot-convert {
        background: gradient-color
        font-size 4.3vw
        color: #fff
        text-align: center
        border-radius 8vw
        height: vw(38)
        padding 0 5vw
        line-height: vw(38)
        margin 0 auto
      }
      .cart
        width vw(20)
        height vw(20)
        fill #666
      .buy
        color #333
      .add
        color #fff
        background-color main-color
        width vw(120)
        height vw(40)
        line-height vw(40)
        text-align center
        border-radius vw(20)
</style>
